<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // HTML元素.style.样式属性="值"
        // document.getElementById("a1").style.color="#fff";
        // 对于原本的css中的连接符，去掉-，后面的首字母变大写
        // document.getElementById("a1").style.fontSize="200px";
        // background-color=>backgroundColor

        // onmouseout()鼠标离开事件
        // onmouseover()鼠标进入事件
        

        // className属性
        // 元素.classname="样式名称"
    </script>
    <style>
         *{
            margin: 0;
            padding: 0;
        }

        #shopping {
            margin: 20px auto 0 auto;
            width: 300px;
        }

        #cart {
            background: #c1c1c1 url("./img/cart.png") 20px 6px no-repeat;
            border: solid 1px #dcdcdc;
            float: right;
            width: 100px;
            height: 30px;
            padding-left: 50px;
            line-height: 28px;
            cursor: pointer;
            position: relative;
        }

        #cart span {
            position: absolute;
            color: #fff;
            background-color: #e10602;
            display: block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            top: -5px;
            right: 5px;
            font-size: 10px;
            line-height: 15px;
            text-align: center;
        } 

        #cartList {
            display: none;
             width: 300px;
            float: right;
            border: solid 1px #dcdcdc; 
        }
        
        #shopping .cartOver{
            background-color: #ffffff;
            z-index: 100;
            border-bottom: none;
        }
        #shopping .cartOut{
            background-color: #dcdcdc;
            border-bottom: solid 1px #dcdcdc;
        }
        #shopping .cartListOver{
            display: block;
            position: relative;
            top: -2px;
         }
         #shopping .cartListOut{
            display: none;
    
        }
    </style>
</head>

<body>
    <section id="shopping">
        <div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div>

        <div id="cartList">
            <h2>最新加入的商品</h2>
        </div>

    </section>
    <script>
        // document.getElementById("cartList").style.display = "none";
        // function over() {
        //     document.getElementById("cart").style.backgroundColor = "#fff";
        //     document.getElementById("cart").style.borderBottom = "none"
        //     document.getElementById("cart").style.zIndex = "100"
        //     // document.getElementById("cartList").style.borderTop = "none"
        //     document.getElementById("cartList").style.display = "block";
        //     document.getElementById("cartList").style.position="relative";
        //     document.getElementById("cartList").style.top="-2px"

        // }
        // function out() {
        //     document.getElementById("cart").style.backgroundColor = "#c1c1c1"
        //     document.getElementById("cart").style.borderBottom = "solid 1px #dcdcdc"
        //     document.getElementById("cartList").style.display = "none"
        // }

        function over(){
            document.getElementById("cart").className="cartOver";
            document.getElementById("cartList").className="cartListOver";
        }

        function out(){
            document.getElementById("cart").className="cartOut";
            document.getElementById("cartList").className="cartListOut";
        }

        // alert(document.getElementById("cart").currentStyle.display)
    </script>
</body>

</html>